<!-- 浏览器指纹（浏览器唯一标识）
    原理：不同设备在利用 canvas 绘制图像时存在细微差异，
    差异来源于：不同的浏览器、操作系统、显卡驱动和硬件配置等。
    1. 绘制 canvas，获取 base64 的 dataurl
    2. 对 dataurl 这个字符串进行 md5 摘要计算，得到指纹信息
    
    若在生产环境使用，可以使用 https://github.com/fingerprintjs/fingerprintjs
-->
<div class="box">
    <div class="line">
        <span>Canvas</span>
        <h3 id="fpcanvas"></h3>
    </div>
    <div class="line">
        <span>FingerprintJS</span>
        <h3 id="fpjs"></h3>
    </div>
    <a href="https://browserleaks.com/canvas" target="_blank">
        测试网站：browserleaks
    </a>
</div>
<script type="module">
    import FingerprintJS from 'https://esm.sh/@fingerprintjs/fingerprintjs'
    import SparkMD5 from 'https://esm.sh/spark-md5'

    function fpCanvas() {
        console.time('fpCanvas')
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        ctx.font = '14px Arial'
        ctx.fillStyle = '#ccc'
        ctx.fillText('hello, justorez', 2, 2)
        const dataUrl = canvas.toDataURL('image/jpeg')
        const fp = SparkMD5.hash(dataUrl)
        console.timeEnd('fpCanvas')
        return fp
    }

    async function fpJs() {
        console.time('fpJs')
        const fp = await FingerprintJS.load()
        const result = await fp.get()
        console.timeEnd('fpJs')
        return result.visitorId
    }

    async function main() {
        document.querySelector('#fpcanvas').innerText = fpCanvas()
        document.querySelector('#fpjs').innerText = await fpJs()
    }

    main()
</script>
